<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <style type="text/css">
    div {
        width: 400px;
        height: 400px;
    }
    </style>
    fasdfggg
    <div>
        <input type="text" id="uu" value="点击我">
        <input type="button" id="yy" value="点击我">
    </div>
    <div id="content">The happie法师打发发送到st of people don’t necessarily have the bes 发送到t 法师打发 of everything;they just make the most of everything that comes along their way.Happiness lies for those who 132 发到 cry,those who hurt, those who have searched, and those who have tried,for only they can appreciate the importance of people <span>77788<span>hhhhhhhhhh</span></span>ffsasdf </div>
</body>
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="css/word-recall.css" type="text/css">
<script type="text/javascript">
$("#yy").click(function() {
    addTextToSpan($("body"));
    alert(1);
});



function isBlank(obj) {
    return (!obj || $.trim(obj) === "");
}

var listNotSpan = ["SCRIPT", "STYLE", "LINK"];

function addTextToSpan($parent) {

    //递归子元素
    $parent.children().each(function() {
        var flag = true;
        for (var i = 0; i < listNotSpan.length; i++) {
            if (this.nodeName == l istNotSpan[i]) {
                flag = false;
                break;
            }
        }
        if (flag) {
            addTextToSpan($(this));
        }
    });

    //遍历元素 将单词用一个特殊的span包裹
    $parent.contents().filter(function() {

        if (this.nodeType == 3 && !isBlank(this.wholeText)) {
            var $textNode = $(this);
            $textNode.before(handlerWords(this.data));
            $textNode.remove();
            return true;
        } else {
            return false;
        }
    });
}

/**
处理单词为单词添加class
*/
function handlerWords(text) {
    var words = text.split(/([a-zA-Z]+)/g);
    var newHtmlText = '';
    for (var i = 0; i < words.length; i++) {
        newHtmlText = n ewHtmlText + " " + getWordSpan(words[i]);
    }
    return newHtmlText;
}




function getWordSpan(word) {
    return "<span class='new_word' word='" + word.toLowerCase() + "'>" + word + "</span>";
}
</script>

</html>
